<template>
  <div>
    <div class="line"></div>
    <transition
      appear
      name="animate__animated animate__backOutUp"
      enter-active-class="animate__slideInDown"
    >
      <el-menu
        :default-active="activeMenu"
        :router="true"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        style="position: fixed; z-index: 20; width: 100%"
      >
        <el-menu-item>
          <router-link to="/home">
            <img src="@/assets/MyLogo.png" height="30" />
          </router-link>
        </el-menu-item>
        <el-menu-item index="/home">主页</el-menu-item>
        <el-menu-item index="/works">作品欣赏</el-menu-item>
        <el-menu-item index="/consult">工艺咨询</el-menu-item>
        <el-menu-item v-show="isLogin"
          ><button class="login">
            <router-link to="/login">登录/注册</router-link>
          </button></el-menu-item
        >
        <button class="Btn" v-show="!isLogin" @click="logout">
          <div class="sign">
            <svg viewBox="0 0 512 512">
              <path
                d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
              ></path>
            </svg>
          </div>
          <div class="text">Logout</div>
        </button>
      </el-menu>
    </transition>
  </div>
</template>

<script>
export default {
  name: "NavHeader",
  data() {
    return {
      isLogin: false,
      loginUser: [],
    };
  },
  computed: {
    // 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
    // 使得菜单在载入时就能对应高亮
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  methods: {
    checkLogin() {
      if (this.loginUser !== null) {
        // 如果用户登录信息不为空则不显示登录按钮
        this.isLogin = false;
      } else {
        this.isLogin = true; // 没有用户登录信息，显示登录注册按钮
      }
    },
    logout() {
      this.$axios({
        url: "/user/logout",
      })
        .then(() => {
         sessionStorage.removeItem("loginUser");
         this.$router.replace("/login")
        })
        .catch(() => {
          this.$message.error("服务器访问失败！");
        });
    },
  },
  created() {
    this.loginUser = sessionStorage.getItem("loginUser");
    this.checkLogin();
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 2rem;
  background-color: #e44530e2;
  border: none;
  outline: none;
  border-radius: 5px;
  width: 5rem;
  color: #fff;
  a {
    text-decoration: none;
    letter-spacing: 1.5px;
  }
}
:hover {
  cursor: pointer;
}

// 退出按钮
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 33px;
  height: 33px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 26%;
  left: 90%;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: -1%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1em;
  font-weight: 600;
  transition-duration: 0.3s;
}
/* hover effect on button width */
.Btn:hover {
  width: 120px;
  border-radius: 50px;
  transition-duration: 0.3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: 0.3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px, 2px);
}
</style>
